import React, { useState } from "react";

import "../static/css/addArticle.css";

import { marked } from "marked";

import { Row, Col, Input, Button, Select, DatePicker } from "antd";
const { Option } = Select;
const { TextArea } = Input;

function AddArticle() {
  const [articleId, setArticleId] = useState(0); // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
  const [articleTitle, setArticleTitle] = useState(""); //文章标题
  const [articleContent, setArticleContent] = useState(""); //markdown的编辑内容
  const [markdownContent, setMarkdownContent] = useState("预览内容"); //html内容
  const [introducemd, setIntroducemd] = useState(); //简介的markdown内容
  const [introducehtml, setIntroducehtml] = useState("等待编辑"); //简介的html内容
  const [showDate, setShowDate] = useState(); //发布日期
  const [updateDate, setUpdateDate] = useState(); //修改日志的日期
  const [typeInfo, setTypeInfo] = useState([]); // 文章类别信息
  const [selectedType, setSelectType] = useState(1); //选择的文章类别

  const handleChange = (value) => {
    console.log(value);
  };
  const changeArticleContent = (e) => {
    setArticleContent(e.target.value);
    let html = marked(e.target.value);
    setMarkdownContent(html);
  };
  const changeIntroduce = (e) => {
    setIntroducemd(e.target.value);
    let html = marked(e.target.value);
    setIntroducehtml(html);
  };

  marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
  });

  return (
    <div>
      <Row gutter={5}>
        <Col span={18}>
          <Row gutter={10}>
            <Col span={20}>
              <Input placeholder="博客标题" size="large" />
            </Col>
            <Col span={4}>
              <Select defaultValue="2" onChange={handleChange} size="large">
                <Option value="1">视频教程</Option>
                <Option value="2">话题直击</Option>
                <Option value="3">闲谈风云</Option>
              </Select>
            </Col>
          </Row>
          <Row gutter={10} style={{ marginTop: "20px" }}>
            <Col span={12}>
              <TextArea
                value={articleContent}
                onChange={changeArticleContent}
                onPressEnter={changeArticleContent}
                rows={35}
                className="markdown-content"
                placeholder="文章内容"
              />
            </Col>
            <Col span={12}>
              <div
                dangerouslySetInnerHTML={{ __html: markdownContent }}
                className="show-html"
              ></div>
            </Col>
          </Row>
        </Col>
        <Col span={6}>
          <Row>
            <Col span={24}>
              <Button size="large" style={{ marginRight: "20px" }}>
                暂存
              </Button>
              <Button type="primary" size="large">
                发布
              </Button>
            </Col>
            <Col span={24}>
              <TextArea
                value={introducemd}
                onChange={changeIntroduce}
                onPressEnter={changeIntroduce}
                rows={4}
                placeholder="文章简介"
                style={{ margin: "20px 0" }}
              />
              <div
                dangerouslySetInnerHTML={{ __html: introducehtml }}
                className="introduce-html"
              ></div>
            </Col>
            <Col span={12}>
              <div className="date-select">
                <DatePicker placeholder="发布日期" size="large" />
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
}

export default AddArticle;
